<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

<!--      <div class="search-ctrl f-l" >
        <form style="height: 100%;">
          <input placeholder="根据图标名称搜索" @keyup="defaultLoad($event)" v-model="searchContent" class="search-text">
      &lt;!&ndash;    <button class="search-btn btn btn-default" type="button">更多条件</button>&ndash;&gt;
          <button class="search-btn btn btn-info" @click="searchDotResource" type="button">搜索</button>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-success" @click="iconMoreSubFn">批量上传</button>
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
     <!--   <button type="button" class="btn btn-warning" @click="toggleRevampModal">修改</button>-->
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader">
              <span v-if="tds.key !== 'STORE_ID'">{{ trs[tds.key] }}</span>
              <div class="icon" v-else :style="{backgroundImage: 'url('+ imgSrc + trs[tds.key] +')',color:'red'}"></div>
         <!--     <img class="icon" v-else :src="imgSrc + trs[tds.key]" >-->
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="pages !== '0'"
        v-if="tableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="(parseInt(pages))"
        :allpage="(Math.ceil(pages/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增-->
    <AddIconModal
      :addModalObj="addModalObj"
      @addModalClose="toggleAddModal"
    ></AddIconModal>

    <!--修改-->
    <RevampIconModal
      :RevampModalObj="RevampModalObj"
      :selectRowId="selectRowId"
      @RevampModalClose="toggleRevampModal"
    ></RevampIconModal>

    <!--图标批量上传-->
    <IconMoreSubModal
      :IconMoreSubModalObj="IconMoreSubModalObj"
      @closeModalClose="iconMoreSubFn"
    ></IconMoreSubModal>

  </div>
</template>

<script>
    import Pages from "../../sudoku/atom/pages.vue"
    import AddIconModal from "./AddIconModal"
    import RevampIconModal from "./RevampIconModal"
    import IconMoreSubModal from "./IconMoreSubModal"
    import SearchPublic from "../../publicTemplate/search/SearchPublic"
    export default {
        name: "iconTable",
        data(){
          return{
            isActive:-1,
            selectRowId:"",
            tableHeader:[
              {"key":"NAME","value":"名称"},
              {"key":"UPLOAD_USER_PARSE","value":"上传人"},
              {"key":"STORE_ID","value":"图片"},
              {"key":"UPLOAD_TIME_PARSE","value":"上传时间"},
            ],
            tableRow:[],
            pages:"",
            tableRowParams : {
              pageIndex:"1", //当前页
              pageSize:"20", //数量
            },
            addModalObj:{
              isShow:false,
              upUserId:""
            },
            RevampModalObj:{
              isShow:false,
              upUserId:""
            },
            IconMoreSubModalObj:{
              isShow:false,
            },
            searchContent:"", //搜索设备号
            isDetailsModal:false, //是否为查看界面
            imgSrc:"",
            params : {
              "columns": ["*"],
              "conditions": [],
              "dataTypeCode": "pointresource",
              "pageSize": 20,
              "sorters": [
                {
                  "order": "desc",
                  "sortField": "UPLOAD_TIME"
                }
              ],
              "tableName": "T_RES_IMAGE_LIB"
            },
            searchObj:{
              condition:[
                {"title":"图标名称","key":"NAME",'type':'text',"value":''},
              ],
              htmlType:"searchDefaultPublic",
            }
          }
        },
        components:{
          Pages,
          AddIconModal,
          RevampIconModal,
          SearchPublic,
          IconMoreSubModal
        },
        mounted(){
          //asc
          this.params.pageIndex = 1;
          this.tableRowAjax();
          this.imgSrc = baseURL +"api/jp-TIFS-FileCenter-ms/file?businessId=";
          console.log(baseURL);
        },
        filters:{
         /* setDisplayImg:function(_json){
            let value = "";
            let tdJson = _json[0];
            let key = _json[1];
            if( key === "STORE_ID" ){
              value = baseURL +"api/jp-TIFS-FileCenter-ms/file?businessId="+tdJson[key]
            }else{
              value = tdJson[key];
            }
            return value;
          }*/
        },
        methods:{

          //加载表格
          tableRowAjax(){
            //GET /camera/fetchTAllCamera
            //console.log(this.HOST);
            //POST /base/query/page
            this.tableRow = [];
            let _this = this;

              _this.$axios.post(_this.HOST+"/base/query/page",_this.params)
                .then((data)=>{
                  //console.log(data);
                  setTimeout(function(){
                  _this.tableRow = data.data.data.list;
                  _this.pages = data.data.data.total;
                  //清除选择
                  _this.clearSelect();
                  },1000);
                })
                .catch((err)=>{
                  //console.log(err);
                })


          },
          //翻页加载
          tablePageData(page){
            this.params.pageIndex = page;
            this.tableRowAjax();
            ////console.log(page);
          },
          //新增弹窗显示与隐藏
          toggleAddModal(){
            this.addModalObj.isShow = !this.addModalObj.isShow;
            if( this.addModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //修改弹窗显示与隐藏
          toggleRevampModal(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = false;
            }else{
              this.s_alert("请选择需要修改的图标！");
            }
            if( this.RevampModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //搜索功能
          searchDotResource(){
            if( this.searchContent === "" ){
              this.params.conditions = [];
            }else{
              this.params.conditions = [
                {"field":"NAME","symbol":"like","value":"%"+this.searchContent+"%"}
              ];
            }
            this.tableRowAjax();
          },
          //选择行
          selectRow(obj,index){
            //console.log(obj);
            this.selectRowId = obj.ID;
            this.isActive = index;
          },
          //查看详情
          isDetailsModalFn(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = true;
            }else{
              this.s_alert("请选择需要查看的图标！");
            }
          },
          //默认加载
          defaultLoad(ev){
            if( ev.keyCode === 8 ){
              if( this.searchContent === "" ){
                this.searchDotResource();
              }
            }
          },
          //删除
          deleteFn(){
            if( this.selectRowId !=="" ){
              //console.log(this.params);
              let msg = confirm("请问是否删除该图标？");
              if( msg ){
                //DELETE /base/remove
                let params = {
                  "conditions": [
                    {
                      "field": "id",
                      "symbol": "=",
                      "value": this.selectRowId
                    }
                  ],
                  "dataTypeCode": "pointresource",
                  "tableName": "T_RES_IMAGE_LIB"
                };
                this.$axios.delete(this.HOST+"/base/remove",{
                  data:params
                })
                  .then((data)=>{
                    //console.log(data);
                    this.s_alert("删除成功！");
                    this.s_logwrite("点位信息管理-图标库管理","删除图标");
                    //console.log(this.params);
                    this.tableRowAjax();
                  })
                  .catch((err)=>{
                    this.s_alert("删除失败！");
                    //console.log(err);
                  })
              }
            }else{
              this.s_alert("请选择需要删除的图标！");
            }
          },
          //批量上传
          iconMoreSubFn(){
            this.IconMoreSubModalObj.isShow = !this.IconMoreSubModalObj.isShow;
            if( this.IconMoreSubModalObj.isShow === false ){
              this.tableRowAjax()
            }
          },
          //搜索
          searchParamsFn(searchParams){
            //console.log(this.searchObj.condition);
            let searchParamsArr = [];
            for( let i=0;i<this.searchObj.condition.length;i++ ){
              if( this.searchObj.condition[i].value && this.searchObj.condition[i].value !=="" ){
                searchParamsArr.push(
                  {"field": this.searchObj.condition[i].key,"symbol":"like","value":"%"+this.searchObj.condition[i].value+"%"}
                )
              }
            }
            this.params.conditions = searchParamsArr;
            //console.log(searchParamsArr);
            this.tableRowAjax();
          },
          //清除选择
          clearSelect(){
            this.isActive=-1;
            this.selectRowId="";
          },
        }
    }
</script>

<style scoped>

</style>
